<template>
  <div class="Station_table"> 
    <el-table
      :data="
        tableData.filter((v) => {
          if (val === '') return true;
          return v.city.includes(val);
        })
      "
      style="width: 100%"
      border='1'

    >
      <el-table-column fixed prop="id" label="ID" />
      <el-table-column prop="city" label="车站" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-switch
            :model-value="scope.row.state === '启用' ? true : false"
            class="ml-2"
            inline-prompt
            active-icon="Watermelon"
            inactive-icon="Sugar"
            @change="
              (e) => {
                SetState(e, scope.row.id);
              }
            "
            :style="{
              marginLeft: '24px',
              '--el-switch-on-color': ' #13ce66',
              '--el-switch-off-color': '#F56C6C',
            }"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <el-popconfirm
          width='200'
            @confirm="() => del(scope.row.id)"
            :title="'确定删除车站' + scope.row.city + '?'"
          >
            <template #reference>
              <el-button type='danger' size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { HttpState, HttpDel } from "api";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {};
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    val: { type: String, default: "" },
  },
  methods: {
    async del(id) {
      const res = await HttpDel({ id });
      ElMessage({
        message: res.data.msg+'车站',
        type:'warning'
      });
      this.$emit("getlist");
    },
    async SetState(e, id) {
      const res = await HttpState({ id });
      console.log(res.data);
      ElMessage({
        type: "warning",
        message: res.data.msg,
      });
      this.$emit("getlist");
    },
  },
};
</script>

<style>
</style>